<template>
  <div class="haveCart">
    <van-swipe-cell v-for="item of cartsInfo" :key="item.goods.id">
      <van-card :desc="item.goods.title" class="goods-card" :thumb="item.goods.topImages" />
      <div class="goodsPrice">
        <ul>
          <li>{{item.goods.lowNowPrice | rmb}}</li>
          <li>x{{item.count}}</li>
          <li class="goodsSub">{{(item.count*item.goods.lowNowPrice).toFixed(2) | rmb}}</li>
        </ul>
      </div>
      <div class="stepper">
        <van-stepper
          :value="item.count"
          integer
          @minus="operateGoods({id:item.goods.id,state:'add'})"
          @plus="operateGoods({id:item.goods.id,state:'cut'})"
          @blur="blur(item.goods.id)"
          @overlimit="overlimit"
        />
      </div>
      <div class="goodsRadio">
        <input type="checkbox" :checked="item.checked" @click="asynClickOnechecked(item.goods.id)" />
      </div>
      <template #right>
        <van-button
          square
          text="删除"
          type="danger"
          @click="delOnegoods(item.goods.id)"
          class="delete-button"
        />
      </template>
    </van-swipe-cell>
  </div>
</template>

<script>
import { Toast } from "vant";
import { mapActions } from "vuex";
export default {
  name: "CartsContent",
  props: {
    cartsInfo: Object,
    default() {
      return {};
    }
  },
  data() {
    return {
      value: "",
      isCheck: false,
    };
  },
  methods: {
    ...mapActions(["asynOperateGoods", "asynUpdateStorage", "asynDelOnegoods",'asynClickOnechecked']),
    // 加减商品数量
    operateGoods(obj) {
      this.asynOperateGoods(obj);
      this.asynUpdateStorage();
    },

    // input输入商品数量 ，失焦触发
    blur(gid) {
      // 默认有个event事件参数。不需要传event参数，失焦后要拿到输入框的值。
      let obj = { id: gid, state: "blur", value: event.target.value };
      this.asynOperateGoods(obj);
      this.asynUpdateStorage();
      // this.$store.dispatch("asynUpdateStorage");
    },
    // 点击不可用按钮
    overlimit() {
      Toast.fail("商品数量不能小于1");
    },

    // 左滑移除商品的方法
    delOnegoods(gid) {
      this.asynDelOnegoods(gid);
      this.asynUpdateStorage();
    }
  },
};
</script>

<style scoped>
.haveCart {
  position: relative;
  background-color: #f2f2f2;
  margin-top: 46px;
  height: calc(100% - 46px - 49px - 50px);
  overflow: scroll;
} /* 商品列表的css */
.van-swipe-cell {
  padding-bottom: 6px;
}
.van-swipe-cell .van-card {
  background-color: white;
  padding: 8px 4px 8px 22px;
}
.goodsPrice {
  position: absolute;
  z-index: 99;
  right: 12px;
  top: 14px;
  line-height: 22px;
  text-align: right;
  font-size: 16px;
  color: black;
}
.goodsPrice .goodsSub {
  font-size: 18px;
  color: #ff0000;
}
.stepper {
  position: absolute;
  top: 70px;
  left: 120px;
  background-color: white;
}
/* 每个商品前的勾选框css */
.goodsRadio {
  position: absolute;
  width: 20px;
  font-size: 20px;
  top: 50%;
  left: 0;
  transform: translateY(-50%);
}
.goodsRadio input {
  zoom: 250%;
	margin-left: 1px;
}
.van-card__desc.van-ellipsis {
  padding-top: 10px;
  width: 186px;
  max-height: 50px;
  height: 40px !important;
  font-size: 14px;
}
/* 修改右滑删除按钮的样式 */
.van-swipe-cell__right .van-button--normal {
  height: 100%;
}
</style>
